<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 源数据
        let obj = {
            name:"王洋洋",
            age:19
        }
        // 目标
        let person = {};
        // 对数据源中的每一个属性都行遍历 进行处理 才能使其变为响应式 但是效率不高
        Object.defineProperty(person,"name",{
            get(){
                return obj.name;
            },
            set(value){
                console.log(value);
                obj.name = value;
            }
        })
        console.log(person);
        person.name = '思哲';
        // console.log()
        // 直接在此种情况下添加的属性和方法它不是响应式，不会影响源数据
        person.hobby = '肤白貌美大长腿'


        // Object.defineProperty监听对应的对象的属性  获取getter   当修改数据时通过setter监听
        /* 
        Observe数据劫持  订阅者
        watcher  观察者
        Compile模板解析  发布者

        Observe 
        getter 依赖收集 setter派发更新
        dep对象 subs watcher实例数组当中  进行渲染

        数据变化 通过watchter 视图更新
        
        
        
        
        */
        

    </script>
</body>
</html>